<template>
	<view class="tab" :style="{background: backgroundColor}">
		<block v-for="(item, index) in tabList" :key="index">
			<view class="tab-item" @tap="switchTab(index)">
				<view class="tab-item-icon">
					<!-- <image :src="currentTabIndex == index ? item.selectedIconPath:item.iconPath"></image> -->
					<img :src="currentTabIndex == index ? item.selectedIconPath:item.iconPath" />
				</view>
				<view class="tab-item-text"
					:style="[currentIndex == index ? {color: selectedColor}:{color: color}]">
						{{item.text}}
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			// 定义tab列表
			tabList: {
				type: Array
			},
			// 当前选中的索引，默认第一个
			currentIndex: {
				type: [Number, String],
				default: 0
			},
			// 背景色
			backgroundColor: {
				type: String,
				default: '#FBFBFB'
			},
			// 默认文字颜色
			color: {
				type: String,
				default: '#444444'
			},
			// 默认选中的文字颜色
			selectedColor: {
				type: String,
				default: '#0080FF'
			}
		},
		data() {
			return {
				currentTabIndex: this.currentIndex
			}
		},
		methods:{
			switchTab(index) {
				this.currentTabIndex = index
				this.$emit('clicked', index)
			}
		}
	}
</script>

<style lang="less" scoped>
.tab {
	display: flex;
	width: 100%;
	height: 50px;
	/* position: fixed;
	bottom: 0;
	z-index: 9999; */
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		.tab-item-icon {
			display: flex;
			align-items: flex-end;
			img {
				width: 45rpx;
				height: 45rpx;
			}
		}
		.tab-item-text {
			font-size: 20rpx;
		}
	}
}
</style>
